<template>
    <div style="width: 100%;">
        <customTabbar name="选择年纪册次" />
        <image src="/static/english/english_top_bg.png" class="topBg" />
        <div class="tab">
            <div v-for="item in tab" :key="item.id" class="item" @click="handleTab(item.id)">
                {{item.name}}
                <view class="line" :style="{visibility: activeTab === item.id ? 'unset' : 'hidden'}"></view>
            </div>
        </div>
        <div class="list">
            <div class="item" v-for="item in list" :key="item.id" @click="navTO(item.code, item.name)">
                {{ item.name }}
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
    import customTabbar from '@/components/customTabbar/index.vue';
    import { getGradeListApi } from '@/apis/index';
    const tab = ref([
        {id: 1, name: 'PEP'},
        {id: 2, name: '新起点'},
        {id: 3, name: '精通版'}
    ]);
    const list = ref([]);
    const activeTab = ref(1);
    let course = null;
    onLoad(({data})=>{
        const temp = decodeURIComponent(data);
        course = JSON.parse(temp).course
        getGradeList(1);
        if(course === 'chinese'){
            tab.value= [
                {id: 4, name: '五四制'},
                {id: 5, name: '六三制'},
            ]
            activeTab.value = 4
        }
    })
    const getGradeList = async (flag)=>{
        const res = await getGradeListApi({flag});
        list.value = res.obj;
    }
    const handleTab = (e)=>{
        activeTab.value = e;
        getGradeList(e);
    }
    const navTO = (code, name)=>{
        const data = { name, stage: code, course, flag: activeTab.value }
        uni.navigateTo({
            url:'/pages/grade-books/index?data=' + encodeURIComponent(JSON.stringify(data))
        })
    }
</script>

<style lang="scss">
.topBg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 445rpx;
    z-index: -1;
}
.tab{
    margin-top: 24rpx;
    width: calc(100% - 64rpx);
    display: flex;
    flex-direction: row;
    padding:0 32rpx;
    :not(:first-child){
        margin-left: 102rpx;
    }
    .item{
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
        line-height: 44rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        .line{
            position: absolute;
            top: 24rpx;
            left: 0;
            width: 100%;
            height: 14rpx;
            background: #9D55F0;
            border-radius: 0rpx 0rpx 0rpx 0rpx;
            opacity: 0.5;
        }
    }
}
.list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 16rpx;
    margin-top: 24rpx;
    .item{
        width: 218rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 40rpx;
        background: linear-gradient( 315deg,#9D55F0 60%, #ad90fc 100%);
        color: #fff;
        font-size: 32rpx;
        margin-left: 16rpx;
        margin-top: 24rpx;
    }
}
</style>